<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script src="js/common.js"></script>
		<title>订单列表</title>
		<style>
			* {
				padding: 0;
				margin: 0
			}

			.bottom {
				background-color: #ececec;
				text-align: center;
				height: 40px;
				line-height: 40px;
				position: fixed;
				bottom: 0px;
				width: 100%;
			}

			.con {
				background-color: #e60012;
			}

			.top .tit {
				padding: 15px;
				border-radius: 20px 20px 0px 0px;
				background-color: white;
				margin-top: 10px;
				border-bottom: 1px solid #e2e2e2;
			}

			body {
				background-color: #F1F3F7;
			}

			.top .tit p {
				margin-top: 5px;
			}

			.tit p {
				color: #666;
				font-size: 12px;
			}

			.middle {
				padding: 10px;
			}

			.slogen {
				line-height: 20px;
				color: yellow;
				font-weight: 600;
				padding-left: 30px;
				padding-top: 20px;
			}

			.middle img {
				width: 25%;
				border: 1px solid #F1F3F7;
				border-radius: 5px;
			}

			.order {
				background-color: white;
				border-radius: 10px;
				margin-bottom: 10px;
				padding: 10px;
			}

			.orderTime {
				font-size: 12px;
				color: #999;
				line-height: 30px;
			}

			.orderBtnGroup {
				text-align: right;
			}

			.orderId {
				color: red;
				text-align: right;
			}

			.orderId span {
				font-size: 18px;
				font-weight: 800;
			}

			.proNum {
				color: #999;
				text-align: right;
				margin-top: 40px;
			}

			.total span {
				font-size: 18px;
				font-weight: 800;
			}

			.order img {
				width: 50px;
				padding-right: 5px;
				display: inline-block;
				float: left;
			}

			.order li {
				height: 50px;
				margin-bottom: 5px;
			}

			.order li span {
				line-height: 50px;
				display: inline-block;
				height: 50px;
				float: left;
			}
			li img{
				height: 40px;
			}
		</style>
	</head>
	<body>
		
		<div id="app">
			<!-- 头部 -->
			<div class="con">
				<p class="slogen">就爱这家大饭店</p>
				<div class="top ">
					<div class="tit">
						全部订单
					</div>
				</div>
			</div>

			<!-- 中间 -->
			<!-- 单个订单 -->
			<el-row :gutter="0" class="order" v-for="item in  orderList">
				<el-col :xs="16" :sm="16" :md="16">
					<h3 class="total">￥<span>{{item.proPrice}}</span></h3>
					<p class="orderTime">{{item.orderTime}}</p>
					<ul>
						<li v-for="(detail,index) in item.orderDetailList">
							<img :src="servicePre+'/showPic/'+detail.proImg" alt="">
							<span>{{detail.proName}} {{detail.proPrice}}元x {{detail.num}} </span> 
							</li>
					</ul>
				</el-col>
				<el-col :xs="8" :sm="8" :md="8">
					<p class="orderId">取餐号 <span>{{item.id}}</span></p>
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" class="orderBtnGroup">
					<div style="color: #666; line-height: 40px;">{{item.descr}}</div>
					<el-button round>立即评价</el-button>
					<el-button type="danger" round plain>再来一单</el-button>
				</el-col>
			</el-row>
			


			<!-- 底部菜单-->
			<el-row :gutter="0" class="bottom">
				<el-col :xs="12" :sm="12" :md="12" @click="toIndexPage()">
					<div class="grid-content">
						<el-icon>
							<Fries />
						</el-icon>点餐
					</div>
				</el-col>
				<el-col :xs="12" :sm="12" :md="12" style="background: #ccc;">
					<div class="grid-content">
						<el-icon>
							<List />
						</el-icon>
						订单
					</div>
				</el-col>
			</el-row>
		</div>
		<!-- 脚本开始 -->
		<script>
			const App = {
				data() {
					return {
						orderList: [],
						servicePre: globalData.server,
						desksId:2
					}
				},
				created() {
					this.desksId = globalData.getDeskId();
					this.getOrderList();
				},
				methods: {
					async getOrderList() {
						let params = {
							'desksId': this.desksId
						}
						const res = await getOrderListApi(params)
						console.log(res)
						this.orderList.push(...res.data)
					},
					toIndexPage(){
						window.location.href="index.html"
					}
				}

			};


			const app = Vue.createApp(App);
			//使用图标
			app.component('Fries', ElementPlusIconsVue.Fries)
			app.component('List', ElementPlusIconsVue.List)
			app.component('Location', ElementPlusIconsVue.Location)
			app.component('Memo', ElementPlusIconsVue.Memo)
			//引入ElementPlus
			app.use(ElementPlus);
			app.mount("#app");
		</script>
	</body>
</html>